<template>
  <div class="aboutUs">
    <div style="display:flex;">
      <span class="aboutUs_header">{{showTime}}好，{{name}}</span>
    </div>
    <span class="aboutUs_title">{{content.subTitle}}</span>
    <div style="display:flex">
      <div class="aboutUs_box">
        <span class="aboutUs_box_title">{{swiperList[0].title}} >>></span>
      </div>
    </div>
  </div>

</template>

<script>
  import {mapGetters} from 'vuex';
  import {list} from '@/api/article'
  import {list as tag} from '@/api/tag'
  export default {
    data(){
      return{
        showTime: '上午',
        swiperList: [{title:'新手指引'}],
        tagIds: '',
        id: ''
      }
    },
    computed: {
      ...mapGetters([
        'mchId',
        'name'
      ])
    },
    props:[
      'content'
    ],
    created(){
      this.initQuestion()
      var date = new Date();
      var hour = date.getHours();
      if (hour < 10) {
        this.showTime = "上午";
      } else if (hour < 12) {
        this.showTime = "中午";
      } else if (hour < 18) {
        this.showTime = "下午";
      } else {
        this.showTime = "晚上";
      }
    },
    methods:{
      initQuestion() {
        var _this = this
        let params = {
          'mchId': _this.mchId,
          'type': 0,
        }
        tag(params).then(res => {
          console.log(res)
          res.data.data.forEach(item => {
            if (item.name === '新手指引') {
              this.tagIds = item.id
              // 查找新手指引
              list({ 'mchId': _this.mchId, 'tagIds': _this.tagIds }).then(res => {
                 this.swiperList = res.data.data
                 this.id = res.data.data[0].id
              }).catch(err => {
                console.log(err)
              })
            }
          })
        }).catch(err => {
          console.log(err)
        })
      },
    }
  }
</script>

<style scoped>
  .aboutUs_header{
    font-size: 21px;
    margin-bottom: 20px;
  }
  .aboutUs{
    display: flex;
    flex-direction: column;
    padding: 10px;
  }
  .aboutUs_title{
    font-size: 15px;
    margin-bottom: 10px;
  }

  .aboutUs_box{
    padding: 4px;
    border-radius: 4px;
    border: 1px solid rgb(58, 165, 168);
    display: flex;
    justify-content: center;
    align-items: center;

  }

  .aboutUs_box_title{
    font-size: 10px;
    color: rgb(58, 165, 168);
  }
</style>
